import { BellOutlined } from "@ant-design/icons";
import { Badge } from "antd";
import { useState, useEffect } from "react";
import notificationService from "@/api/services/notification";
import { NotificationList } from "./list";

export const NotificationButton = () => {
	const [unreadCount, setUnreadCount] = useState(0);

	const fetchUnreadCount = async () => {
		try {
			const response = await notificationService.notificationList({
				page: 1,
				limit: 10,
			});
			setUnreadCount(
				response.data.filter((n: any) => n.status === "unread").length,
			);
		} catch (error) {
			console.error("Failed to fetch notifications:", error);
		}
	};

	useEffect(() => {
		fetchUnreadCount();
	}, []);

	return (
		<Badge count={unreadCount} offset={[-5, 5]}>
			<BellOutlined className="text-2xl" />
		</Badge>
	);
};

export { NotificationList };
